
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .btn {
            transition: all 0.2s;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .btn:active {
            transform: scale(0.95);
        }
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
<div class="w-full max-w-xs">
    <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
        <!-- 显示屏区域 -->
        <div class="p-4 bg-gray-800 text-right">
            <div id="display" class="text-white text-3xl font-mono h-10">0</div>
            <div id="history" class="text-gray-400 text-sm h-5"></div>
        </div>

        <!-- 按键区域 -->
        <div class="grid grid-cols-4 gap-1 p-2 bg-gray-100">
            <!-- 第一行 -->
            <button onclick="clearAll()" class="btn bg-red-400 hover:bg-red-500 text-white p-4 text-xl">AC</button>
            <button onclick="appendToDisplay('(')" class="btn bg-gray-300 hover:bg-gray-400 p-4 text-xl">(</button>
            <button onclick="appendToDisplay(')')" class="btn bg-gray-300 hover:bg-gray-400 p-4 text-xl">)</button>
            <button onclick="appendToDisplay('/')" class="btn bg-yellow-400 hover:bg-yellow-500 text-white p-4 text-xl">÷</button>

            <!-- 数字7-9 -->
            <button onclick="appendToDisplay('7')" class="btn bg-gray-200 hover:bg-gray-300 p-4 text-xl">7</button>
            <button onclick="appendToDisplay('8')" class="btn bg-gray-200 hover:bg-gray-300 p-4 text-xl">8</button>
            <button onclick="appendToDisplay('9')" class="btn bg-gray-200 hover:bg-gray-300 p-4 text-xl">9</button>
            <button onclick="appendToDisplay('*')" class="btn bg-yellow-400 hover:bg-yellow-500 text-white p-4 text-xl">×</button>

            <!-- 数字4-6 -->
            <button onclick="appendToDisplay('4')" class="btn bg-gray-200 hover:bg-gray-300 p-4 text-xl">4</button>
            <button onclick="appendToDisplay('5')" class="btn bg-gray-200 hover:bg-gray-300 p-4 text-xl">5</button>
            <button onclick="appendToDisplay('6')" class="btn bg-gray-200 hover:bg-gray-300 p-4 text-xl">6</button>
            <button onclick="appendToDisplay('-')" class="btn bg-yellow-400 hover:bg-yellow-500 text-white p-4 text-xl">-</button>

            <!-- 数字1-3 -->
            <button onclick="appendToDisplay('1')" class="btn bg-gray-200 hover:bg-gray-300 p-4 text-xl">1</button>
            <button onclick="appendToDisplay('2')" class="btn bg-gray-200 hover:bg-gray-300 p-4 text-xl">2</button>
            <button onclick="appendToDisplay('3')" class="btn bg-gray-200 hover:bg-gray-300 p-4 text-xl">3</button>
            <button onclick="appendToDisplay('+')" class="btn bg-yellow-400 hover:bg-yellow-500 text-white p-4 text-xl">+</button>

            <!-- 底部行 -->
            <button onclick="appendToDisplay('0')" class="btn bg-gray-200 hover:bg-gray-300 p-4 text-xl col-span-2">0</button>
            <button onclick="appendToDisplay('.')" class="btn bg-gray-200 hover:bg-gray-300 p-4 text-xl">.</button>
            <button onclick="calculate()" class="btn bg-green-500 hover:bg-green-600 text-white p-4 text-xl">=</button>
        </div>
    </div>
</div>

<script>
    let currentInput = '0';
    let calculationHistory = '';

    function updateDisplay() {
        document.getElementById('display').innerText = currentInput;
        document.getElementById('history').innerText = calculationHistory;
    }

    function appendToDisplay(value) {
        if (currentInput === '0' && value !== '.') {
            currentInput = value;
        } else {
            currentInput += value;
        }
        updateDisplay();
    }

    function clearAll() {
        currentInput = '0';
        calculationHistory = '';
        updateDisplay();
    }

    function calculate() {
        try {
            calculationHistory = currentInput + ' =';
            currentInput = eval(currentInput.replace(/×/g, '*').replace(/÷/g, '/')).toString();
            updateDisplay();
        } catch (e) {
            currentInput = 'Error';
            updateDisplay();
            setTimeout(clearAll, 1000);
        }
    }
</script>
</body>
</html>
